<template>
    <div class="box">
        <div class='subtitle'>基础用法</div>
        <at-select v-model="value1" plceholder="标志为">
            <at-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
            </at-option>
        </at-select>
        <div class='subtitle subtitle_bottom'>表单下拉</div>
        <at-select v-model="value1" plceholder="标志为" type="formselect">
            <at-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
            </at-option>
        </at-select>
        <div class='subtitle subtitle_bottom'>表单下拉多选1</div>
        <at-select  v-model = "value2" plceholder="标志为" multiple>
            <at-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
            </at-option>
        </at-select>
        <div class='subtitle subtitle_bottom'>表单下拉多选2</div>
        <at-select  v-model = "value2" plceholder="标志为" multiple collapse-tags>
            <at-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
            </at-option>
        </at-select>
    </div>        
</template>

<script>
export default { 
    data() {
        return {
            options1: [{
                value: '选项1',
                label: '已清除'
                }, {
                value: '选项2',
                label: '忽略'
                }, {
                value: '选项3',
                label: '误报',
                disabled:true
                }, {
                value: '选项4',
                label: '误报'
                }, {
                value: '选项5',
                label: '误报'
                }, {
                value: '选项6',
                label: '误报'
            }],
            value1: '',
            options2: [{
                value: '选项1',
                label: '已清除'
                }, {
                value: '选项2',
                label: '忽略'
                }, {
                value: '选项3',
                label: '误报',
                disabled:true
                }, {
                value: '选项4',
                label: '误报'
                }, {
                value: '选项5',
                label: '误报'
                }, {
                value: '选项6',
                label: '误报'
            }],
            value2: ''
        }
    }
}  
</script>
<style>
.box{
    width:200px;
    height:200px;
    position: relative;
    left: 20px;
    top: 10px;
} 
/* 可以改变at-select的宽度来改变它的大小 */
/* .box .at-select{
    width:200px;
} */
</style>
